/*
 * @Description: 智能测肤
 * @Author: kanglin
 * @Date: 2018-06-25 09:13:19
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
 @import '~src/assets/css/common.less';
	.v-problem{
		width: 100%;
		height: 360*@rem-per-px;
		padding-bottom: 12*@rem-per-px;

		.chart{
			width: 100%;
		}
	}
</style>


<template>
	<div class="v-problem">
		<img
			:src="canvas_url"
			class="chart"
			alt="">
	</div>
</template>

<script>

import tips_bg from 'src/assets/media/img/2.3.9/jiechubaogao_left_img@2x';
import tips_bg_3 from 'src/assets/media/img/report/Image measuring skin_bg_2';
import male_background from 'src/assets/media/img/2.3.9/baogao_boy_img@2x';
import female_background from 'src/assets/media/img/2.3.9/baogao_girl_img@2x';
import Chart from './utils/chart';
import Line from './utils/line';
import Pattern from './utils/pattern';
import Tips from './utils/tips';

// 女性图片资源
export const MALE_RESOURCE = {
	BACKGROUND: male_background,
	TIPS_BG: tips_bg,
	TIPS_BG_3: tips_bg_3,
};

// 男性图片资源
export const FEMALE_RESOURCE = {
	BACKGROUND: female_background,
	TIPS_BG: tips_bg,
	TIPS_BG_3: tips_bg_3,
};


const CHART_WIDTH = 750;
const CHART_HEIGHT = 360;


export default {
	name: 'TouchProblem',
	props: {
		problems: {
			type: Object,
			required: true,
		},
		sex: {
			type: Number,
			required: true,
		},
	},

	data() {
		return {
			canvas_url: null,
			chart: null,
			tip_1: null,
			tips_2: null,
			tips_3: null,
			tips_4: null,
			line_1: null,
			line_2: null,
			line_3: null,
			line_4: null,
			is_loaded: false,
		};
	},

	computed: {
		isMale() {
			return this.sex === 1;
		},
	},

	watch: {
		problems() {
			// console.log(JSON.stringify(this.problems))
			if (this.chart) {
				this.tips_1.setContent(this.problems.EYE_TAIL.title, this.problems.EYE_TAIL.contents);
				this.line_1.setVisible(!!this.problems.EYE_TAIL.contents);
				this.tips_2.setContent(this.problems.CHEEK.title, this.problems.CHEEK.contents);
				this.line_2.setVisible(!!this.problems.CHEEK.contents);
				this.tips_3.setContent(this.problems.ARM.title, this.problems.ARM.contents);
				this.line_3.setVisible(!!this.problems.ARM.contents);
				this.tips_4.setContent(this.problems.NECK.title, this.problems.NECK.contents);
				this.line_4.setVisible(!!this.problems.NECK.contents);
				this.canvas_url = this.chart.render();
			}
		},
	},
	mounted() {
		const line_coordinates = this.createCoordinatesBySex(this.sex);
		const resources = this.getResourcesBySex(this.sex);
		const chart = new Chart(CHART_WIDTH, CHART_HEIGHT);
		Chart.preloadResources(resources)
			.then((resource) => {
				this.chart = chart;
				this.line_1 = new Line(line_coordinates.line_1, this.problems.EYE_TAIL && !!this.problems.EYE_TAIL.contents);
				this.line_2 = new Line(line_coordinates.line_2, this.problems.CHEEK && !!this.problems.CHEEK.contents);
				this.line_3 = new Line(line_coordinates.line_3, this.problems.ARM && !!this.problems.ARM.contents);
				this.line_4 = new Line(line_coordinates.line_4, this.problems.NECK && !!this.problems.NECK.contents);
				this.tips_1 = new Tips(resource.TIPS_BG, 20, 36, 248, 126, this.problems.EYE_TAIL.title, this.problems.EYE_TAIL.contents);
				this.tips_2 = new Tips(resource.TIPS_BG, 482, 36, 248, 126, this.problems.CHEEK.title, this.problems.CHEEK.contents);
				this.tips_3 = new Tips(resource.TIPS_BG, 20, 218, 248, 126, this.problems.ARM.title, this.problems.ARM.contents);
				this.tips_4 = new Tips(resource.TIPS_BG, 482, 218, 248, 126, this.problems.NECK.title, this.problems.NECK.contents);
				const person = new Pattern(resource.BACKGROUND, 238, 52, 270, 270);
				const url = chart.add(person)
					.add(this.tips_1)
					.add(this.tips_2)
					.add(this.tips_3)
					.add(this.tips_4)
					.add(this.line_1)
					.add(this.line_2)
					.add(this.line_3)
					.add(this.line_4)
					.render();
				this.canvas_url = url;
				this.is_loaded = true;
				// return {
				// 	tips_1, tips_2, tips_3, tips_4,
				// };
			})
			.catch(() => {
				const toast = this.$createToast({
					type: 'error',
					time: 2000,
					txt: this.$t('global.network_exception'),
				});
				toast.show();
			});
	},

	methods: {
		/**
		 *  生成折线坐标配置
		 *  @param {string} sex
		 *  @returns {Object} Coordinate 折线坐标配置
		 */
		createCoordinatesBySex() {
			const line_coordinates = {};
			if (!this.isMale) { // 女性折线坐标配置
				Object.assign(line_coordinates, {
					line_1: [
						{ x: 268, y: 99 },
						{ x: 350, y: 99 },
						{ x: 377, y: 145 },
					],
					line_2: [
						{ x: 482, y: 99 },
						{ x: 429, y: 99 },
						{ x: 380, y: 172 },
					],
					line_3: [
						{ x: 268, y: 280 },
						{ x: 300, y: 280 },
						{ x: 310, y: 264 },
					],
					line_4: [
						{ x: 482, y: 280 },
						{ x: 435, y: 280 },
						{ x: 385, y: 212 },
					],
				});
			} else {
				Object.assign(line_coordinates, {
					line_1: [
						{ x: 268, y: 99 },
						{ x: 350, y: 99 },
						{ x: 377, y: 145 },
					],
					line_2: [
						{ x: 482, y: 99 },
						{ x: 429, y: 99 },
						{ x: 380, y: 172 },
					],
					line_3: [
						{ x: 268, y: 280 },
						{ x: 300, y: 280 },
						{ x: 310, y: 264 },
					],
					line_4: [
						{ x: 482, y: 280 },
						{ x: 435, y: 280 },
						{ x: 385, y: 212 },
					],
				});
			}
			return line_coordinates;
		},

		/**
		 * 获取资源列表
		 * @param {string} sex
		 * @returns {Object} resource
		 */
		getResourcesBySex() {
			return !this.isMale ? FEMALE_RESOURCE : MALE_RESOURCE;
		},
	},
};
</script>
